import { Form, Button } from 'antd';
import { useState } from 'react'
import './Intelligent_elevator.scss'
import Biao from '../Security_monitoring/Biao'
import Biao2 from '../Security_monitoring/Biao2';
import Biao3 from '../Security_monitoring/Biao3';
import Add from '../Security_monitoring/Add';


const Intelligent_elevator = () => {
    //设置from
    const [form] = Form.useForm();

    //批量删除
    const del = () => {

    }
    //新增
    const [addyemian, setaddyemian] = useState(false);
    const add = () => {
        setaddyemian(true)
    }
    const [state, setState] = useState(1)
    //判断点击的是哪一个title

    let biao;
    if (state === 1) {
        biao = <Biao></Biao>
    } else if (state === 2) {
        biao = <Biao2></Biao2>
    } else if (state === 3) {
        biao = <Biao3></Biao3>
    }
    const dianji = (v) => {

        console.log(v)
        setState(v)

    }

    if (addyemian) {
        return (
            <div>
               <Add  setaddyemian={ setaddyemian}></Add>
            </div>
        );
    } else {
        return (
            <div>
                <div className='roleContent'>
                    <Form form={form} name="horizontal_login" layout="inline" className='title'>
                        <Form.Item
                            name="username">
                            <div className='kuai'>
                                <span></span>
                                <span>安防监控管理</span>
                            </div>
                        </Form.Item>
                        <Form.Item className='btn'>
                            <div>
                                <Button className='cha'
                                    type="primary"
                                    onClick={add}>新增</Button>
                                <Button className='resize' onClick={del} type="primary">批量删除</Button>
                            </div>

                        </Form.Item>
                    </Form>
                    <div className='biao'>
                        <div className='theme'>
                            <span onClick={() => { dianji(1) }} style={{ color: state === 1 ? '#009688' : 'black' }}>设备列表</span>
                            <span onClick={() => { dianji(2) }} style={{ color: state === 2 ? '#009688' : 'black' }}>告警记录</span>
                            <span onClick={() => { dianji(3) }} style={{ color: state === 3 ? '#009688' : 'black' }}>运维记录</span>
                        </div>
                        <hr />
                        {biao}
                    </div>
                </div>

            </div>
        );
    }
};
export default Intelligent_elevator